<template>
    <div class="prepare-board-root">
        <img alt="" class="icon" :src="item.icon"/>
        <p class="p_name">{{item.nick}}</p>
        <p class="job">{{item.job}}</p>
        <div class="detail">
            <el-popover placement="top-start"
                        :width="$pop.licenseWidth"
                        trigger="hover"
                        :disabled="$pop.getLicensesString(item.type).all.length===0">
                <p v-for="(lt,li) in $pop.getLicensesString(item.type).all" :key="li">
                    {{lt}}</p>
                <p slot="reference">
                    {{$pop.getLicensesString(item.type).first}}
                </p>
            </el-popover>
            <p>{{item.salary}}</p>
            <p>{{item.age}}</p>
            <p>{{item.work_period}}</p>
            <p>{{item.education}}</p>
        </div>
        <button v-if="item.state==='待入职'" class="not_suit" @click="clickWhich" data-which="not" :data-sid="item.sid">
            不合适
        </button>
        <div class="splitter"></div>
        <div class="btn_group">
            <button v-show="item.showReportQ" class="report" @click="clickWhich" data-which="report"
                    :data-sid="item.sid">查看推荐报告
            </button>
            <button class="online" @click="clickWhich" data-which="online" :data-sid="item.sid">查看在线简历</button>
            <a v-show="item.attach" @click="$oss.downAndOpen(item.attach)">
                <button class="attachment" @click="clickWhich" data-which="attachment"
                        :data-sid="item.sid">下载附件简历
                </button>
            </a>
        </div>
        <p v-if="item.state!=='待入职'" class="state" v-bind:class="stateClass">{{item.state}}</p>
    </div>
</template>

<script>

  import oss from '../../assets/utils/oss'

  export default {
    name: 'Resume',
    props: {
      item: {
        type: Object,
        default: {
          sid: 0,
          icon: '',
          nick: '高女士',
          job: '职位名称',
          type: '执业类型',
          salary: '期望年薪',
          age: '年龄',
          work_period: '工作年限',
          education: '学历',
          state: '待入职',
          showReportQ: false
        }
      },
      index: {
        type: Number,
        default: 0
      }
    },
    computed: {
      stateClass: function() {
        return {
          'state_0': this.item.state === '未过保',
          'state_1': this.item.state === '未过保已离职',
          'state_2': this.item.state === '已过保',
          'state_3': this.item.state === '不合适'
        }
      }
    },
    methods: {
      clickWhich: function(e) {
        const ops = e.target.dataset.which
        const sid = e.target.dataset.sid
        this.$emit('click-which', ops, sid, this.index)
      }
    },
    created() {

    }
  }
</script>

<style lang="scss" scoped>
    .prepare-board-root {
        width: 982px;
        height: 164px;
        background: rgba(255, 255, 255, 1);

        position: relative;

    }

    p {
        margin: 0;
    }

    .icon {
        width: 51px;
        height: 51px;

        /*background: black;*/

        position: absolute;
        left: 50px;
        top: 30px;
    }

    .detail {
        width: fit-content;
        height: 15px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);

        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        position: absolute;
        left: 121px;
        top: 67px;

        p {
            font-size: 14px;
            font-weight: 400;
            color: rgba(153, 153, 153, 1);
            border-right: rgba(153, 153, 153, 1) 1px solid;
            padding-left: 10px;
            padding-right: 10px;
        }

        :last-child {
            border-right: none;
        }

    }

    .not_suit {
        width: 96px;
        height: 28px;
        border: 1px solid rgba(252, 100, 73, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(252, 100, 73, 1);

        position: absolute;
        left: 834px;
        top: 53px;
    }

    .report {
        width: 110px;
        height: 28px;
        background: rgba(255, 249, 242, 1);
        border: 1px solid rgba(255, 217, 178, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(240, 171, 103, 1);

        margin-right: 10px;
    }

    .online {
        width: 110px;
        height: 28px;
        background: rgba(255, 249, 242, 1);
        border: 1px solid rgba(255, 217, 178, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(240, 171, 103, 1);

        margin-right: 10px;
    }

    .attachment {
        width: 110px;
        height: 28px;
        background: rgba(255, 249, 242, 1);
        border: 1px solid rgba(255, 217, 178, 1);
        border-radius: 5px;

        font-size: 14px;
        font-weight: 400;
        color: rgba(240, 171, 103, 1);
    }

    .splitter {
        width: 880px;
        height: 1px;
        background: rgba(243, 243, 247, 1);

        position: absolute;
        left: 50px;
        top: 101px;
    }

    .p_name {
        font-size: 18px;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);

        position: absolute;
        left: 129px;
        top: 30px;

    }

    .job {
        font-size: 14px;
        font-weight: 400;
        color: rgba(74, 176, 207, 1);

        position: absolute;
        left: 203px;
        top: 36px;

    }

    .btn_group {
        display: flex;
        flex-direction: row;


        position: absolute;
        left: 50px;
        top: 116px;
    }

    .v_splitter {
        width: 1px;
        height: 15px;
        background: rgba(153, 153, 153, 1);
    }

    .state {
        position: absolute;
        right: 52px;
        top: 20px;
    }

    .state_0 {
        font-size: 16px;
        font-weight: bold;
        color: rgba(240, 147, 56, 1);
    }

    .state_1 {
        font-size: 16px;
        font-weight: bold;
        color: rgba(221, 58, 49, 1);
    }

    .state_2 {
        font-size: 16px;
        font-weight: bold;
        color: rgba(64, 150, 103, 1);
    }

    .state_3 {
        font-size: 16px;
        font-weight: bold;
        color: rgba(153, 153, 153, 1);
    }

</style>